<template>
<div class="tc-right">
    <div class="tc-righttop-tab j-tc-righttop-tab">
        <ul class="RTtab clearfix">
            <!-- <li class="visitTab-btn RTtab-active2 fl">设计回访</li> -->
            <!-- <li class="visitTab-btn RTtab-active3 fl">客户回访</li> -->
            <!-- <li class="list-btn RTtab-active fl">其他按钮</li>
            <li class="list-btn RTtab-active fr">
                <router-link :to="routerPath('list')">列表</router-link>
            </li> -->
        </ul>
    </div>
    <div class="tc-right-top clearfix">
        <div class="fl needdealt">
            <ul>
                <li class="bgRed">待办一</li>
                <li class="bgOrange">待办二</li>
                <li class="bgGreen">待办三</li>
            </ul>
        </div>
        <div class="visitbox">
            <!-- 回访内容 #j-visit 是一个整体内容 切换列子看 Index/Right-->
            <div class="visit" id="j-visit" v-scrollHeight="250">
                <div v-if="surLogs !== undefined && surLogs !== null && surLogs.length>0">
                    <div v-for="(item, index) in surLogs" :key="index"> <div class="visi-list tx-right" v-if="item.logtype==47">
                        <div class="visi-listtop">
                            <span v-if="item.importance === 1" class="cGreen">{{ '正常' }}</span>
                            <span v-if="item.importance === 2" class="cOrange">{{ '异常' }}</span>
                            <span v-if="item.importance === 3" class="cRed">{{ '问题' }}</span>
                            <!-- <span class="visi-date">{{item.logcontent}}</span> -->
                            <span class="visi-date">{{item.createtime}}</span>
                            <span class="visi-name">团</span>
                        </div>
                        <p class="visi-listtxt cBlue" style="margin-left: 35px;">
                            {{item.logcontent}}
                        </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tc-right-bottom pa10 relative">
        <div class="tc-right-bottom-left relative">
            <ul class="topdaily">
                <li class="cRed">
                    <a @click="choice(1)" :class="{'cRed':this.flag === 1}" class="topdailybtn" href="javascript:">正常</a>
                </li>
                <li>
                    <a @click="choice(2)" :class="{'cRed':this.flag === 2}" class="topdailybtn" href="javascript:">异常</a>
                </li>
                <li>
                    <a @click="choice(3)" :class="{'cRed':this.flag === 3}" class="topdailybtn" href="javascript:">问题</a>
                </li>
            </ul>
            <div>
                <textarea v-model="text" style="height:150px;width:100%; border:none" placeholder="请输入回访问题"></textarea>
            </div>
            <input type="button" class="uiBtn-normal uiBtn-blue mt10" value="提交" @click="submitData()" style="margin: 0 auto;
    display: block;">
        </div>
        <!-- <div class="EventpenaltyDiv">
            <a href="javascrpit:;" class="EventpenaltyBtn">事件平台</a>
            <a href="javascrpit:;" class="EventpenaltyBtn">平台</a>
        </div> -->
    </div>
    <!-- 三段渲染容器 -->
    <transition class="animated faster" enter-active-class="animated faster slideInLeft" leave-active-class="animated faster slideOutLeft">
        <router-view></router-view>
    </transition>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import {
    insertZhaoSurLog, surLogList
} from '../Resources/Api/index'
export default {
    name: '',
    computed: {
        ...mapGetters(['leftInfo', 'updateLeft'])
    },
    data () {
        return {
            surLogs: [],
            flag: 0,
            text: ''
        }
    },
    created () {
        this.getSurLogList()
    },
    methods: {
        ...mapMutations({
            setLeftData: `SET_LEFT_INFO`
        }),
        choice (index) {
            this.flag = Number(index)
        },
        // 添加回访信息
        submitData () {
            if (this.flag === 0) {
                layer.msg('请选择回访的状态')
                return
            }
            if (this.text === '') {
                layer.msg('请输入回访内容')
                return
            }
            insertZhaoSurLog({
                orderno: this.leftInfo.uid,
                importance: this.flag,
                logcontent: this.text
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    this.text = ''
                    this.getSurLogList()
                }
            }).catch(err => {
                console.log('添加回访信息失败，异常信息：' + err)
            })
        },
        // 查询指定人员的回访信息
        getSurLogList () {
            surLogList({
                orderno: this.leftInfo.uid
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    this.surLogs = result.data.Body.surLogs
                }
            }).catch(err => {
                console.log('查询指定人员的回访信息失败，异常信息：' + err)
            })
        },
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        }
    },
    watch: {
        leftInfo () {
            this.getSurLogList()
        }
    }
}
</script>
<style scoped>
a.topdailybtn.cRed {
  color: #fff;
  background-color: #0e92ff;
}
.tc-right-bottom-left {
  margin-right: 20px;
  height: 100%;
}
</style>
